/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before */
@import "../../../style/default";
@import "../../input/style/mixin";

/* apes-cascader */
$cascader-prefix-cls: #{$style-prefix}-cascader;


.#{$cascader-prefix-cls} {
  @include reset-component;

  &-input.#{$style-prefix}-input {
    // Add important to fix https://github.com/apes-design/apes-design/issues/5078
    // because input.less will compile after cascader.less
    position: static;
    width: 100%;
    background-color: transparent !important;
    cursor: pointer;
    display: block;
  }

  &-picker {
    @include reset-component;
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: $component-background;
    border-radius: $border-radius-base;
    outline: 0;

    &-with-value &-label {
      color: transparent;
    }

    &-disabled {
      cursor: not-allowed;
      background: $input-disabled-bg;
      color: $disabled-color;
      .#{$cascader-prefix-cls}-input {
        cursor: not-allowed;
      }
      .#{$cascader-prefix-cls}-picker {
        &-label {
          border-bottom: $input-border-bottom-disabled;
          &:hover,&:focus {
            border-color: $input-border-color;
          }
        }
        &-arrow {
          color: $ng-select-arrow-disabled-color;
        }
      }
    }

    &-readonly {
      cursor: text;
    }

    &:focus .#{$cascader-prefix-cls}-input {
      @include active();
    }

    &-label {
      position: absolute;
      left: 0;
      height: $input-height-base;
      line-height: $line-height-base;
      top: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      padding: 4px 11px;
      margin-top: 0;
      display: inline-block;
      //border: 1px solid #d9d9d9;
      @include border;
      border-radius: $ng-select-border-radius;
      &:hover,&:focus {
        border-color: $input-hover-border-color;
      }
    }

    &-clear {
      opacity: 0;
      position: absolute;
      right: $control-padding-horizontal;
      z-index: 2;
      background: $component-background;
      top: 50%;
      font-size: $font-size-sm;
      color: $ng-select-disabled-color;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      line-height: 12px;
      cursor: pointer;
      transition: color 0.3s ease, opacity 0.15s ease;
      &:hover {
        color: $text-color-secondary;
      }
    }

    &:hover &-clear {
      opacity: 1;
    }

    // arrow
    &-arrow {
      position: absolute;
      z-index: 1;
      top: 50%;
      right: $control-padding-horizontal;
      width: 12px;
      height: 12px;
      font-size: 12px;
      margin-top: -6px;
      line-height: 12px;
      color: $ng-select-arrow-color;
      &:before {
        transition: transform .2s;
      }
      &-expand {
        &:before {
          transform: rotate(180deg);
        }
      }
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    right: $control-padding-horizontal-sm;
  }

  &-menus {
    font-size: $font-size-base;
    background: $component-background;
    position: absolute;
    z-index: $zindex-dropdown;
    border-radius: $border-radius-base;
    box-shadow: $box-shadow-base;
    white-space: inherit;

    //ul,
    //ol {
    //  list-style: none;
    //  margin: 0;
    //  padding: 0;
    //}

    &-empty,
    &-hidden {
      display: none;
    }
    &.slide-up-enter.slide-up-enter-active &-placement-bottomLeft,
    &.slide-up-appear.slide-up-appear-active &-placement-bottomLeft {
      animation-name: antSlideUpIn;
    }

    &.slide-up-enter.slide-up-enter-active &-placement-topLeft,
    &.slide-up-appear.slide-up-appear-active &-placement-topLeft {
      animation-name: antSlideDownIn;
    }

    &.slide-up-leave.slide-up-leave-active &-placement-bottomLeft {
      animation-name: antSlideUpOut;
    }

    &.slide-up-leave.slide-up-leave-active &-placement-topLeft {
      animation-name: antSlideDownOut;
    }
  }
  &-menu {
    display: inline-block;
    vertical-align: top;
    min-width: 111px;
    height: 180px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-right: $border-width-base $border-style-base $border-color-split;
    overflow: auto;
    &:first-child {
      border-radius: $border-radius-base 0 0 $border-radius-base;
    }
    &:last-child {
      border-right-color: transparent;
      margin-right: -1px;
      border-radius: 0 $border-radius-base $border-radius-base 0;
    }
    &:only-child {
      border-radius: $border-radius-base;
    }
  }
  &-menu-item {
    padding: 5px $control-padding-horizontal;
    line-height: 22px;
    cursor: pointer;
    //white-space: nowrap;
    transition: all 0.3s;
    &:hover {
      background: $item-hover-bg;
    }
    &-disabled {
      cursor: not-allowed;
      color: $disabled-color;
      &:hover {
        background: transparent;
      }
    }
    &-active:not(&-disabled) {
      &,
      &:hover {
        background: $background-color-base;
        font-weight: 600;
      }
    }
    &-expand {
      position: relative;
      padding-right: 24px;
      &:after {
        color: $text-color-secondary;
        position: absolute;
        right: $control-padding-horizontal;
      }
    }
    &-loading:after {
       animation: loadingCircle 1s infinite linear;
    }

    & &-keyword {
      color: $highlight-color;
    }
  }
}

.city-select-wrap {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.city-select-content {
  width: 100%;
  min-height: 10px;
  background-color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
}

.city-select {
  font-size: $font-size-base;
}

.city-select dl {
  line-height: 2;
  clear: both;
  padding: 3px 0;
  margin: 0;
}

.city-select dt {
  position: absolute;
  width: 2.5em;
  font-weight: 500;
  text-align: right;
  line-height: 2;
}

.city-select dd {
  margin-left: 0;
  line-height: 2;
}

.city-select.province dd {
  margin-left: 3em;
}

.city-select a {
  display: inline-block;
  padding: 0 10px;
  outline: 0;
  text-decoration: none;
  //white-space: nowrap;
  margin-right: 2px;
  text-decoration-line: none;
  color: $text-color;
  cursor: pointer;
}

.city-select a:hover,
.city-select a:focus {
  background-color: $btn-default-bg-h;
  color: $btn-default-color;
  border-radius: $border-radius-base;
  transition: all .3s ease;
}

.city-select a.active {
  background-color: $btn-primary-bg;
  color: $btn-primary-color;
  border-radius: $border-radius-base;
}
